<template>
  <div class="image-uploader">
    <!-- <el-upload
       :action="uploadImgUrl"
       name="file"
       :headers="headers"
       :show-file-list="false"
       :before-upload="beforeAvatarUpload"
       :on-remove="handleAvatarRemove"
       :on-success="handleAvatarSuccess"
       :on-change="handleAvatarChange"
       :on-error="handleAvatarError"
       accept='.jpg,.jpeg,.png,.gif'>
       <img v-if="url" :src="url" class="avatar" alt="">
       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
     </el-upload>-->

    <el-upload
      accept='.jpg,.jpeg,.png,.gif'
      :file-list="fileList"
      :limit="limit"
      :class="{hide:hideUpload}"
      :action="uploadImgUrl"
      :headers="headers"
      list-type="picture-card"
      :on-error="handleError"
      :before-remove="beforeRemove"
      :before-upload="beforeUpload"
      :on-change="handleChange"
      :on-success="handleSuccess"
      :on-preview="handlePreview"
      :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="url" alt="">
    </el-dialog>

  </div>
</template>

<script>
  import {getToken} from '@/utils/auth';
  import {Loading} from 'element-ui';
  import {deleteFile} from '@/api/common';

  export default {
    name: "uploadImage",
    props: {
      path: {
        type: String,
        require: false
      },
      paths: {
        type: Array,
        require: false
      },
      limit: {
        type: Number,
        default: 1
      },
      fileTypeArray: {
        type: Array,
        default: () => ['image/jpeg', 'image/png', 'image/gif', 'image/jpg']
      }
    },
    data() {
      return {
        uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/aliyun/upload",
        headers: {
          Authorization: 'Bearer ' + getToken()
        },
        url: '',
        hideUpload: false,
        fileList: [],
        dialogVisible: false
      }
    },
    created() {
      if (this.path) {
        this.fileList = [{name: this.path, url: this.path}];
      }
      this.hideUpload = this.fileList.length >= this.limit;
    },
    methods: {
      handleSuccess(res, file, fileList) {
        //console.log(fileList);
        this.hideUpload = fileList.length >= this.limit;
        //this.fileList=fileList;
        this.$emit('change', res.urls[0]);
        //this.url = res.urls[0];
        this.loadingClose();
      },
      beforeUpload(file) {
        this.loadingInstance = Loading.service({fullscreen: true, text: '上传图片中。。。。', background: 'rgba(0, 0, 0, 0.5)'});
        let fileType = file.type;
        if (this.fileTypeArray.indexOf(fileType) > -1) {
          return true;
        } else {
          this.$message.error(`只接受图片类型为(${this.fileTypeArray.join(',')})`);
          return false;
        }
      },
      beforeRemove(file, fileList) {
        console.log(file);
        if (file && file.status === "success") {
          return this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //deleteFile(file.url);
            this.$emit('change', '');
          });
        } else {
          this.loadingClose();
        }
      },
      handleRemove(file, fileList) {
        this.hideUpload = fileList.length >= this.limit;
      },
      handlePreview(file) {
        this.url = file.url;
        this.dialogVisible = true;
      },
      handleChange(file, fileList) {
        //this.hideUpload = fileList.length >= this.limit;
      },
      handleError() {
        this.loadingClose();
      },
      loadingClose() {
        this.$nextTick(() => {
          this.loadingInstance.close();
        });
      }
    }
  }
</script>

<style>
  .image-uploader .hide .el-upload--picture-card {
    display: none;
  }
</style>
